<!-- 
 封装组件：按钮，点击后变成文本输入框
  -->
<template>
  <el-button type="primary" link v-if="!editing" @click="editing = true" style="min-width: 80px;">{{ inputValue || '点击编辑' }}</el-button>
  <el-input v-model="inputValue" @input="updateValue" 
    v-if="editing" style="display: inline-block;width:auto"
    @blur="editing = false"
    @keyup.enter="editing = false"></el-input>
</template>

<script lang="ts" setup>
import {ref , watch} from 'vue';

// 定义props和emits
const props = defineProps<{
  modelValue: string;
}>();

// modelValue不可写，这里需要自己再封装一层
const inputValue = ref(props.modelValue)
watch(
  () => props.modelValue,
  (newVal)=>{
    inputValue.value = newVal
  }
)

const emit = defineEmits<{
  (e: 'update:modelValue', value: string): void;
}>();

// 更新值的方法
const updateValue = (text:string) => {
  console.log(text)
  emit('update:modelValue', text);
};

let editing = ref(false);

</script>